import React, { useState } from "react";
import './App.css';


function App() {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    async function handleLogin() {
        console.log("handleLogin")
        let response;
        try {
            response = await fetch(
                "https://httpbin.org/post", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(
                        {
                            'username': username,
                            'password': password,
                        }
                    )
                }
            );
        } catch(ex) {
            //return setServerError(response);
        }
        console.log(response.status);
        if(!response.ok) {

        }
        let json = await response.json();
        let data = await json.data;
        console.log(data);
        return data;
    }

    const updateUsername = async (event) => {
        setUsername(event.target.value);
    }

    const updatePassword = async (event) => {
        setPassword(event.target.value);
    }

    return (
        <div>
            <div>
                <input type="text" value={username} required placeholder="Username" onChange={updateUsername}/>
            </div>
            <div>
                <input type="password" value={password} required placeholder="Password" onChange={updatePassword}/>
            </div>
            <button onClick={handleLogin}>Login</button>
        </div>
    );
}

export default App;

